<template>
  <div class="search">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar
      left-arrow
      title="搜索中心"
      @click-left="$router.back()">
    </van-nav-bar>

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="inputChange"
    >
      <template #action>
        <div @click="clickSearch">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <!-- ！！！与历史记录互斥，如何设置 -->
    <van-cell-group v-if="suggestion.length > 0">
      <van-cell
      v-for="(item,index) in showSuggestion" :key="index"
      icon="search"
      @click="clickSuggestion(index)"
      >
      <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录">
      </van-cell>
      <van-cell
      v-for="(item,index) in history" :key="item" :title="item"
      @click="clickHistory(item)">
        <van-icon name="close" @click.stop="delHistory(index)" />
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { reqLenovo } from '@/api/search.js'
import { getHistory, setHistory } from '@/utils/storage'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 搜索关键字
      suggestion: [], // 联想列表
      history: ['美女', 'java', 'javascript', '手机'], // 准备历史记录
      // history: getHistory(),
      timeId: null
    }
  },
  // 关键字高亮
  computed: {
    showSuggestion () {
      const res = this.suggestion.map(str => {
        const regExp = new RegExp(this.keyword, 'ig')
        const newStr = str.replace(regExp, (match) => {
          return `<span style='color:red'>${match}</span>`
        })
        return newStr
      })
      return res
    }

  },
  methods: {
    // 联想列表
    // 防抖
    inputChange () {
      clearInterval(this.timeId)
      this.timeId = setTimeout(async () => {
        if (this.keyword.trim() === '') {
          this.suggestion = []
          return
        }
        const { data: { options } } = await reqLenovo(this.keyword)
        this.suggestion = options
      }, 300)
    },

    // ===== 点击搜索 ====
    clickSearch () {
      if (this.keyword.trim() === '') return
      this.addHistory(this.keyword)
      // 设置添加后的历史记录到本地
      setHistory(this.history)
    },

    // ===== 点击联想列表 ====
    clickSuggestion (index) {
      this.addHistory(this.suggestion[index])
    },

    // ===== 点击历史记录 =====
    clickHistory (item) {
      // console.log(111)
      this.$router.push({
        path: '/searchresult',
        query: { item }
      })
    },
    // ===== 添加历史记录 =====
    addHistory (words) {
      // 追加的若和历史记录一致，要将历史记录的那一项删除
      const index = this.history.findIndex(item => item === words)
      if (index !== -1) {
        this.history.splice(index, 1)
      }
      this.history.unshift(words)
      // 统一跳转
      this.$router.push({
        path: '/searchresult',
        query: {
          words
        }
      })
    },

    // ====== 点击叉号，删除历史记录 =====
    delHistory (index) {
      this.history.splice(index, 1)
      // 设置删除后的历史记录到本地
      setHistory(this.history)
    }
  }
}
</script>

<style lang="" scoped>

</style>
